<template>
<section class="list-page">
  
  <div class="list-content">
    <div class="list-search">
      <el-checkbox-group 
        class="list-filter"
        v-model="checkList"
        @change="mapFilter">
        <el-checkbox label="flowFlag">流量站</el-checkbox>
        <el-checkbox label="gateFlag">闸控站</el-checkbox>
        <el-checkbox label="videoFlag">视频站</el-checkbox>
        <el-checkbox label="pipeFlag">管道站</el-checkbox>
        <el-checkbox label="waterGaugeFlag">水尺站</el-checkbox>
      </el-checkbox-group>
      <!-- <span class="search-count">符合筛选条件：{{ searchTableData.length }}条</span> -->
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      max-height="600px"
    >
      <el-table-column
        prop="name"
        label="站点名称"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="经纬度"
        width="180"
      >
        <template slot-scope="scope">
          <div>经度：{{ scope.row.longitude }}</div>
          <div>纬度：{{ scope.row.latitude }}</div>
        </template>
      </el-table-column>
      <el-table-column
      prop="flowFlag"
      label="流量站">
      </el-table-column>
      <el-table-column
      prop="gateFlag"
      label="闸控站">
      </el-table-column>
      <el-table-column
      prop="videoFlag"
      label="视频站">
      </el-table-column>
      <el-table-column
      prop="pipeFlag"
      label="管道站">
      </el-table-column>
      <el-table-column
      prop="waterGaugeFlag"
      label="水尺站">
      </el-table-column>
    </el-table>
    
    <el-pagination
      class="list-pagination"
      @current-change="handleCurrentChange"
      :page-size="pageSize"
      background
      layout="total, prev, pager, next"
      :total="searchTableData.length">
      <!-- <span>条件筛选：{{ searchTableData.length }}条</span> -->
    </el-pagination>
  </div>
</section>  
</template>

<script>
import { queryDeviceList } from '@/services/common/common';
export default {
  name: 'list',
  data() {
    return {
      tableData: [],
      deviceTree: [],
      checkList: ['flowFlag', 'gateFlag', 'videoFlag', 'pipeFlag', 'waterGaugeFlag'],
      currentPage: 1,
      pageSize: 10,
      allTableData: [],
      searchTableData: []
    }
  },
  mounted() {
    this.initDeviceTree();
  },
  methods: {
    initDeviceTree () {
      queryDeviceList({}).then(res => {
        const { data = [] } = res;
        this.deviceTree = [{
          name: '桂花湾罐区',
          children: data
        }];
        this.allTableData = data;
        this.searchTableData = data;
        this.tableData = data.slice(0, this.pageSize);
        const testData = []
        for(let i = 0;i<58;i++) {
          testData.push(i)
        }
        this.testData = testData
      });
    },
    mapFilter(checkList) {
      this.tableData=[];
      this.searchTableData=[];
      let filterList = this.allTableData.filter(() => true);
      if (checkList.length) {
        filterList = (this.allTableData || []).filter(item => {
          let flag = false;
          checkList.forEach(child => {
            if (item[child] > 0) {
              flag = true;
              return;
            }
          });
          return flag;
        });
        if (checkList.length === 5) {
          this.searchTableData = this.allTableData;
          this.tableData = this.allTableData.slice(0, this.pageSize);
          return
        }
        this.tableData = filterList.slice(0, this.pageSize);
        this.searchTableData = filterList;
      }
    },
    handleCurrentChange(page) {
      const startIndex = (page * this.pageSize) - (this.pageSize);
      const endIndex = (page * this.pageSize);
      this.tableData = this.allTableData.slice(startIndex, endIndex);
    }
  }
}
</script>

<style lang="scss">
.list-page {
  padding: 20px 50px;
  .list-content {
    background: #fff;
    overflow-y: auto;
    .list-search {
      text-align: left;
      padding: 15px;
      .list-filter {
        margin-bottom: 5px;
      }
      .search-count {
        font-size: 13px;
        color: #606266;
        font-weight: 400;
      }
    }
    .list-pagination {
      text-align: right;
      padding: 15px;
    }
  }

}
</style>